@charset "utf-8";
/* CSS Document */

.body_on{overflow:hidden; width:100%; height:100%; position:fixed; }
.phone_nav{display: none;}
.phone_nav .height{height: 50px;}
.phone_nav .top{ background: #333; height: 50px; position:fixed; left: 0; top: 0; width: 100%; z-index:9999;}
.phone_nav .top .a{float: left; width: 55px; height: 36px; margin: 10px 15px;}
.phone_nav .top .a img{width:100%;}
.phone_nav .but{ float:right; width:22px; height: 30px; margin: 8px 10px; padding: 0 5px; display: block;}
.phone_nav .but i{width:100%; height: 2px; background: #fff; display: block; margin-top: 15px; position: relative; border-radius: 10px; transition: 0.4s; -webkit-transition: 0.4s; }
.phone_nav .but i:before,.but i:after{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:2px; background: #fff; border-radius: 10px; transition: 0.4s;
-webkit-transition: 0.4s;}
.phone_nav .but i:before{ margin-top: -6px;}
.phone_nav .but i:after{ margin-top: 6px;}
.phone_nav .box{ width:100%; height: 100%; background:rgba(0,0,0,0.8); position: fixed; left: 0; top: 0; z-index: 999;  
transform: translateX(100%); -webkit-transform: translateX(100%); transition: 0.7s; -webkit-transition: 0.7s; transition-delay: 0.2s; -webkit-transition-delay: 0.2s; }
.phone_nav .box_con{ padding:50px 20px 0px 20px; overflow-x: hidden; opacity: 0; 
transition: 1s; -webkit-transition: 1s; -webkit-transition: 1s;  transition-delay: 0.2s; -webkit-transition-delay: 0.2s; 
transform: translateX(100px); -webkit-transform: translateX(100px);}
.phone_nav .box_con>ul{ padding-bottom:20px;}
.phone_nav .box_con>ul>li{ border-bottom: 1px solid rgba(225,225,225,0.7); padding: 15px 10px; position: relative;}
.phone_nav .box_con>ul>li>i{position:absolute; right:10px; top:14px; font-style: normal; width: 20px; height: 20px; background: url(../images/iphone_nav_xia.png) right no-repeat;
transition:0.4s; -webkit-transition:0.4s; transform: rotate(-90deg); -webkit-transform: rotate(-90deg)}
.phone_nav .box_con>ul>li>ul{ max-height: 0; overflow: hidden; transition: 0.5s; -webkit-transition: 0.5s;}
.phone_nav .box_con>ul>li>ul>li{padding:5px 10px;}
.phone_nav .box_con>ul>li>ul>li{ border-bottom: 1px solid rgba(225,225,225,0.7); padding: 10px; position: relative;}
.phone_nav .box_con>ul>li>ul>li i{position:absolute; right:10px; top:14px; font-style: normal;width: 20px; height: 20px; background: url(../images/iphone_nav_xia.png) right no-repeat; transition: 0.4s; -webkit-transition: 0.4s; transform: rotate(-90deg); -webkit-transform: rotate(-90deg)}
.phone_nav .box_con>ul>li>ul>li>ul{max-height: 0; overflow: hidden; transition: 0.5s; -webkit-transition: 0.5s;}
.phone_nav .box_con>ul>li>ul>li>ul>li{ padding: 5px;}

.phone_nav .box_con>ul>.i_on>i{transform: rotate(0deg); -webkit-transform: rotate(0deg) }
.phone_nav .box_con>ul>li>ul>.i_on>i{ transform: rotate(0deg); -webkit-transform: rotate(0deg)}
.phone_nav .box_con>ul>.i_on>ul{ max-height:300px; padding-top: 10px;}
.phone_nav .box_con>ul>li>ul>.i_on>ul{ max-height:300px; padding-top: 10px;}

.phone_nav .box_con>ul>li:last-child{border-bottom: 0;}
.phone_nav .box_con>ul>li>ul>li:last-child{border-bottom: 0;}
.phone_nav .box_con li a{color:#fff;}

/*打开样式*/
.phone_on .but i:before{ transform: rotate(45deg); -webkit-transform: rotate(45deg); margin: 0;}
.phone_on .but i:after{ transform: rotate(-45deg);-webkit-transform: rotate(-45deg); margin: 0;}
.phone_on .but i{ background:#333;}
.phone_on .box{transform: translateX(0%); -webkit-transform: translateX(0%); transition-delay: 0s; -webkit-transition-delay: 0s;}
.phone_on .box_con{ opacity:1; transform:translateX(0%); -webkit-transform:translateX(0%);}


